
	<div class="row ">
    		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"> 
				<i class="fa fa-edit fa-fw"></i>
 表单
			<span>
    > 表单组件 
</span>
		
</h1>
</div>

			<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
    		<ul id="sparks" >
    			<li class="sparks-info">
    				 <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
    					1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点营收 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
		
</ul>
	
</div>
	
</div>

<div class="row">
        <div class="col-sm-12 ">
            <div class="well ">
	            <button class="close" data-dismiss="alert">×</button>
            <h1 class="semi-bold">什么是 "Tinyframework表单元素"？</h1>
            <p>
				Tinyframework自带有一个非常完备的个性化网格系统，用户可以根据具体的需求，定制自己的表单布局元素。 
				它可以为开发人员提供快速的，便于操作的表单布局开发组件。
				一般情况下，你可以使用<strong>bootstrap</strong>网格系统或<strong>smart-form</strong>网格系统。
				重要的是，只要你不要将两个独立的样式系统混淆，这样会引起冲突。
            </p>
            <p>
				你可以学习研究为Tinyframework表单元素准备的相关<a href="#ajax/form-templates.pagelet" title="Go to Bootstrap Forms">布局</a>，
				或者，如果你不习惯于这些布局元素，你也可以简单的点击以下链接，浏览默认的一些表单元素，<a href="#ajax/bootstrap-forms.html" title="Go to Bootstrap Forms">Bootstrap forms</a>。
            </p>
        
</div>
    
</div>

</div>

<section id="widget-grid" class="">
    	<div class="row">
    		<article class="col-sm-12 col-md-12 col-lg-12">
    			<div class="jarviswidget " id="wid-id-0"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-edit"></i></span>    <h2>带提示的表单网格</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    				        <form action="/tinyadmin/smartadmin/test.page" class="smart-form " >
					            <header>
	网格系统
</header>
				
				            <fieldset >
					                <div class="row">
    				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
				                    
</section>
				                
</div>
				
				                <div class="row">
    				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                
</div>
				
				                <div class="row">
    				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                
</div>
				
				                <div class="row">
    				                    <section class="col col-6 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="6/12" >
</label>
				                    
</section>
				                    <section class="col col-6 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="6/12" >
</label>
				                    
</section>
				                
</div>
				
				                <section >
											<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="12/12" >
</label>
				                
</section>
				            
</fieldset>
				
				            <fieldset >
					                <div class="row">
    				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                    <section class="col col-3 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="3/12" >
</label>
				                    
</section>
				                
</div>
				
				                <div class="row">
    				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                
</div>
				
				                <div class="row">
    				                    <section class="col col-2 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="2/12" >
</label>
									
</section>
				                    <section class="col col-4 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="4/12" >
</label>
				                    
</section>
				                    <section class="col col-6 ">
					                    	<label class="input">
	<input type="text"  id=""  name=""  value=""  placeholder="6/12" >
</label>
				                    
</section>
				                
</div>
				            
</fieldset>
				
				            <footer>
					                <button type="submit"  class="btn btn-primary">
	提交
</button>
				                <button type="button" class="btn btn-default" onclick="window.history.back();">
	回退
</button>
				            
</footer>
				        
</form>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
	
	<div class="row">
    		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget " id="wid-id-1"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-edit"></i></span>    <h2>基本表单元素(激活状态)</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    						<form action="" class="smart-form " >
								<header>
	标准表单头
</header>
							
														<fieldset >
								    <section >
								        <label class="label">超小文本输入</label>
							        <label class="input">
	<input type="text"      class="input-xs ">
</label>
							    
</section>
							    <section >
								        <label class="label">小型文本输入</label>
							        <label class="input">
	<input type="text"      class="input-sm ">
</label>
							    
</section>
							    <section >
								        <label class="label">最大长度文本输入</label>
							        <label class="input">
	<input type="text" maxlength="10"  id=""  name=""  value=""  >
</label> 
							        <span class="note">
    							            <strong>最大长度</strong>通过属性"maxlength='#'"自动设置
							        
</span>
							    
</section>
							    <section >
								        <label class="label">大文本输入</label>
							        <label class="input">
	<input type="text"      class="input-lg ">
</label>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <section >
								        <label class="label">文件输入</label>
							        <label for="file" class="input input-file">
										<div class="button"><input type="file" name="file" onchange="this.parentNode.nextSibling.value = this.value">浏览</div><input type="text" placeholder="选择本地文件" readonly="">
									</label>
							    
</section>
							    <section >
								        <label class="label">自动输入的文本输入框</label>
							        <label class="input">
	<input type="text" list="list"     >
											<datalist id="list"> 
												<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
										</datalist> 
						             
</label>
									
							        <span class="note">
    							            <strong>注意:</strong>只在Chrome, Firefox, Opera and IE10 有效
							        
</span>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <section >
								        <label class="label">小型选择框</label>
							        <label class="select">
	<select     placeholder=""  class="input-sm ">
												<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							        
</select>
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">默认选择框</label>
							        <label class="select">
	<select     placeholder="" >
												<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							        
</select>
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">大选择框</label>
							        <label class="select">
	<select     placeholder=""  class="input-lg ">
												<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							        
</select>
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">多选择框</label>
							        <label class="select select-multiple">
	<select multiple="multiple" title="$class"     placeholder="" >
												<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							        
</select>
</label>
									
							        <span class="note">
    							            <strong>注意:</strong> 按住Ctrl键选择多个选项.
							        
</span>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <section >
								        <label class="label">Textarea</label>
							        <label class="textarea">
	<textarea  rows="3"  id=""  name=""  value=""  placeholder="" ></textarea>
</label>
									
							        <span class="note">
    							            <strong>注意:</strong> 可以根据rows属性调整textarea输入框的高度。
							        
</span>
							    
</section>
							    <section >
								        <label class="label">可调整大小的Textarea</label>
							        <label class="textarea textarea-resizable">
	<textarea  rows="3"  id=""  name=""  value=""  placeholder=""  class="custom-scroll"></textarea>
</label>
							    
</section>
							    <section >
								        <label class="label">自动扩展的Textarea</label>
							        <label class="textarea textarea-expandable">
	<textarea rows="3" class="custom-scroll"></textarea>
</label>
									
							        <span class="note">
    							            <strong>注意:</strong> 点击即可扩展.
							        
</span>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <section >
								        <label class="label">单选框</label>
							        <div class="row">
    							            <div class="col col-4">
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Alexandra
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Alice
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Anastasia
</label>
							            </div>
							            <div class="col col-4">
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Avelina
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Basilia
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Beatrice
</label>
							            </div>
							            <div class="col col-4">
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Cassandra
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Clemencia
</label>
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio"  value=""  placeholder="" >
	<i></i>Desiderata
</label>
							            </div>
							        
</div>
							    
</section>
							
							    <section >
								        <label class="label">内联单选框</label>
							        <div class="inline-group">
											<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio1"  value=""  placeholder="" >
	<i></i>Alexandra
</label>
										<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio1"  value=""  placeholder="" >
	<i></i>Alice
</label>
										<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio1"  value=""  placeholder="" >
	<i></i>Anastasia
</label>
										<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio1"  value=""  placeholder="" >
	<i></i>Avelina
</label>
										<label class="radio">
	<input type="radio"  checked=""  id=""  name="radio1"  value=""  placeholder="" >
	<i></i>Beatrice
</label>
							        
</div>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <section >
								        <label class="label">复选框</label>
							        <div class="row">
    							            <div class="col col-4">
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Alexandra 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Alice 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Anastasia 
</label>
							            </div>
							            <div class="col col-4">
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Avelina 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Basilia 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Beatrice 
</label>
							            </div>
							            <div class="col col-4">
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Cassandra 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Clemencia 
</label>
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Desiderata 
</label>
							            </div>
							        
</div>
							    
</section>
							
							    <section >
								        <label class="label">内联复选框</label>
							        <div class="inline-group">
											<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Alexandra 
</label>
										<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Alice 
</label>
										<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Anastasia 
</label>
										<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Avelina 
</label>
										<label class="checkbox">
	<input type="checkbox"      placeholder="" >
	<i></i> Beatrice 
</label>
							        
</div>
							    
</section>
							
</fieldset>
							
														<fieldset >
								    <div class="row">
    							        <section class="col col-5 ">
								            <label class="label">可切换的单选框</label>
							            <label class="toggle">
	<input type="radio" name="radio-toggle" checked="checked">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra
</label>
							            <label class="toggle">
	<input type="radio" name="radio-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia
</label>
							            <label class="toggle">
	<input type="radio" name="radio-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina
</label>
							        
</section>
							
							        <div class="col col-2"></div>
							
							        <section class="col col-5 ">
								            <label class="label">可切换的复选框</label>
							            <label class="toggle">
	<input type="checkbox" name="checkbox-toggle" checked="checked">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Cassandra
</label>
							            <label class="toggle">
	<input type="checkbox" name="checkbox-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia
</label>
							            <label class="toggle">
	<input type="checkbox" name="checkbox-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata
</label>
							        
</section>
							    
</div>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">不同图标的评级</label>
							        <div class="rating">
							            <input type="radio" name="stars-rating" id="stars-rating-5">
							            <label for="stars-rating-5"><i class="fa fa-star"></i></label>
							            <input type="radio" name="stars-rating" id="stars-rating-4">
							            <label for="stars-rating-4"><i class="fa fa-star"></i></label>
							            <input type="radio" name="stars-rating" id="stars-rating-3">
							            <label for="stars-rating-3"><i class="fa fa-star"></i></label>
							            <input type="radio" name="stars-rating" id="stars-rating-2">
							            <label for="stars-rating-2"><i class="fa fa-star"></i></label>
							            <input type="radio" name="stars-rating" id="stars-rating-1">
							            <label for="stars-rating-1"><i class="fa fa-star"></i></label>
							            五角星
							        </div>
							
							        <div class="rating">
							            <input type="radio" name="trophies-rating" id="trophies-rating-7">
							            <label for="trophies-rating-7"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-6">
							            <label for="trophies-rating-6"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-5">
							            <label for="trophies-rating-5"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-4">
							            <label for="trophies-rating-4"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-3">
							            <label for="trophies-rating-3"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-2">
							            <label for="trophies-rating-2"><i class="fa fa-trophy"></i></label>
							            <input type="radio" name="trophies-rating" id="trophies-rating-1">
							            <label for="trophies-rating-1"><i class="fa fa-trophy"></i></label>
							            奖杯
							        </div>
							
							        <div class="rating">
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-10">
							            <label for="asterisks-rating-10"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-9">
							            <label for="asterisks-rating-9"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-8">
							            <label for="asterisks-rating-8"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-7">
							            <label for="asterisks-rating-7"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-6">
							            <label for="asterisks-rating-6"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-5">
							            <label for="asterisks-rating-5"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-4">
							            <label for="asterisks-rating-4"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-3">
							            <label for="asterisks-rating-3"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-2">
							            <label for="asterisks-rating-2"><i class="fa fa-asterisk"></i></label>
							            <input type="radio" name="asterisks-rating" id="asterisks-rating-1">
							            <label for="asterisks-rating-1"><i class="fa fa-asterisk"></i></label>
							            星号
							        </div>
									
							        <span class="note">
    							            <strong>注意:</strong> 你可以使用300多种图标.
							        
</span>
							    
</section>
							
</fieldset>
							
							<footer>
								    <button type="submit" class="btn btn-primary">
							        提交
							    </button>
							    <button type="button" class="btn btn-default" onclick="window.history.back();">
							        回退
							    </button>
							
</footer>
						
</form>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget " id="wid-id-2"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-edit"></i></span>    <h2>基本表单元素(禁用状态)</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    						<form action="" class="smart-form " >
								<header>
	标准表单头
</header>
							
							<fieldset >
								    <section >
								        <label class="label">超小型文本输入</label>
							        <label class="input state-disabled">
	<input type="text" class="input-xs" disabled="disabled">
</label>
							    
</section>
							    <section >
								        <label class="label">小型文本输入</label>
							        <label class="input state-disabled">
	<input type="text" class="input-sm" disabled="disabled">
</label>
							    
</section>
							    <section >
								        <label class="label">最大长度文本输入</label>
							        <label class="input state-disabled">
	<input type="text" maxlength="10" disabled="disabled">
</label> 
									
							        <span class="note">
    							            <strong>最大长度</strong>通过属性"maxlength='#'"自动设置
							        
</span>
							    
</section>
							    <section >
								        <label class="label">大文本输入</label>
							        <label class="input state-disabled">
	<input type="text" class="input-lg" disabled="disabled">
</label>

							    
</section>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">文件输入(禁用)</label>
							        <label for="file2" class="input input-file state-disabled">
	<div class="button disabled">浏览</div>
	<input type="text" disabled="disabled">
</label>
							    
</section>
							    <section >
								        <label class="label">自动输入的文本输入框 (禁用)</label>
							        <label class="input state-disabled">
	<input type="text" list="list" disabled="disabled">
	<datalist id="list">
													<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							        
	</datalist> 
</label>
									
							        <span class="note">
    							            <strong>注意:</strong>只在Chrome, Firefox, Opera and IE10 有效.
							        
</span>
							    
</section>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">小型选择框(禁用)</label>
							       <label class="select state-disabled">
	<select class="input-sm" disabled="disabled">
													<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							       
	</select> 
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">默认选择框(禁用)</label>
							       <label class="select state-disabled">
	<select disabled="disabled">
													<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							       
	</select> 
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">大选择框(禁用)</label>
							       <label class="select state-disabled">
	<select class="input-lg" disabled="disabled">
													<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							       
	</select> 
	<i></i> 
</label>
							    
</section>
							    <section >
								        <label class="label">多选框 (禁用)</label>
							       	<label class="select select-multiple state-disabled">
	<select multiple="" class="custom-scroll" disabled="disabled">
													<option>请选择省份</option>
	<option value="浙江">浙江</option>
	<option value="河南">河南</option>
	<option value="山东">山东</option>
	<option value="山西">山西</option>
	<option value="福建">福建</option>
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广东">广东</option>
	<option value="广西">广西</option>   
							       	
	</select> 
</label>
									
							        <span class="note">
    							            <strong>注意:</strong> 按住Ctrl键选择多个选项.
							        
</span>
							    
</section>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">Textarea (禁用)</label>
							        <label class="textarea state-disabled"> 										
	<textarea rows="3" class="custom-scroll" disabled="disabled"></textarea> 
</label>
									
							        <span class="note">
    							            <strong>注意:</strong> 可以根据rows属性调整textarea输入框的高度。
							        
</span>
							    
</section>
							    <section >
								        <label class="label">可调整大小的Textarea(禁用)</label>
							        <label class="textarea textarea-resizable state-disabled"> 										
	<textarea rows="3" class="custom-scroll" disabled="disabled"></textarea> 
</label>	
							    
</section>
							    <section >
								        <label class="label">自动扩展的Textarea(禁用)</label>
							        <label class="textarea textarea-expandable state-disabled"> 										
	<textarea rows="$rows" class="custom-scroll" disabled="disabled"></textarea> 
</label>

									
							        <span class="note">
    							            <strong>注意:</strong> 点击既可扩展.
							        
</span>
							    
</section>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">单选框(禁用)</label>
							        <div class="row">
    							            <div class="col col-4">
							            	<label class="radio state-disabled">
	<input type="radio" name="radio" checked="checked" disabled="disabled">
	<i></i>Alexandra
</label>  
							            	<label class="radio state-disabled">
	<input type="radio" name="radio"  disabled="disabled">
	<i></i>Alice
</label>  
							            	<label class="radio state-disabled">
	<input type="radio" name="radio"  disabled="disabled">
	<i></i>Anastasia
</label>  
							            </div>
							        
</div>
							    
</section>
							    <section >
								        <label class="label">内联单选框(禁用)</label>
							        <div class="inline-group">
							            	<label class="radio state-disabled">
	<input type="radio" name="radio-inline" checked="checked">
	<i></i>Alexandra
</label>
						            	<label class="radio state-disabled">
	<input type="radio" name="radio-inline" >
	<i></i>Alice
</label>
						            	<label class="radio state-disabled">
	<input type="radio" name="radio-inline" >
	<i></i>Anastasia
</label>
							        
</div>
							    
</section>
							
</fieldset>
							
							<fieldset >
								    <section >
								        <label class="label">复选框(禁用)</label>
							        <div class="row">
    							            <div class="col col-4">
							            	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox" checked="checked" disabled="disabled">
	<i></i>Alexandra
</label>
							            	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox"  disabled="disabled">
	<i></i>Alice
</label>
							            	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox"  disabled="disabled">
	<i></i>Anastasia
</label>
							            </div>
							        
</div>
							    
</section>
							    <section >
								        <label class="label">内联复选框(禁用)</label>
							        <div class="inline-group">
								        	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox-inline" checked="checked" disabled="disabled">
	<i></i>Alexandra
</label>
							        	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox-inline"  disabled="disabled">
	<i></i>Alice
</label>
							        	<label class="checkbox state-disabled">
	<input type="checkbox" name="checkbox-inline"  disabled="disabled">
	<i></i>Anastasia
</label>
							        
</div>
							    
</section>
							
</fieldset>
							
							<fieldset >
								    <div class="row">
    							        <section class="col col-5 ">
								            <label class="label">可切换的单选框(禁用)</label>
							            <label class="toggle state-disabled">
	<input type="radio" name="radio-toggle" checked="checked">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Alexandra
</label>
							            <label class="toggle state-disabled">
	<input type="radio" name="radio-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Anastasia
</label>
							            <label class="toggle state-disabled">
	<input type="radio" name="radio-toggle" >
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Avelina
</label>
							        
</section>
							        <div class="col col-2"></div> 
							        <section class="col col-5 ">
								            <label class="label">可切换的复选框 (禁用)</label>
							            <label class="toggle state-disabled">
	<input type="checkbox" name="checkbox-toggle" checked="checked" disabled="disabled">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Cassandra
</label>
							            <label class="toggle state-disabled">
	<input type="checkbox" name="checkbox-toggle"  disabled="disabled">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Clemencia
</label>
							            <label class="toggle state-disabled">
	<input type="checkbox" name="checkbox-toggle"  disabled="disabled">
	<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Desiderata
</label>
							        
</section>
							    
</div>
							
</fieldset>
							
							<footer>
								    <button type="submit" class="btn btn-primary">
							        提交
							    </button>
							    <button type="button" class="btn btn-default" onclick="window.history.back();">
							        回退
							    </button>
							
</footer>
						
</form>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
	
	<div class="row">
    		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-3"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-edit"></i></span>    <h2>Smart 提示 (左边) </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    		                <form action="" class="smart-form " >
			                    <header>
	带有图标的提示
</header>
							<fieldset >
			                        <section >
										<label class="label">右上角提示的Text input</label>
									<label class="input"> 
										<i class="icon-append fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-top-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">有下角提示的Text input</label>
									<label class="input"> <i class="icon-append fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-bottom-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">右侧提示的Text input</label>
									<label class="input"> <i class="icon-append fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>
							
</fieldset>

							<fieldset >
									<section >
										<label class="label">右上角提示的Textarea</label>
									<label class="textarea"> <i class="icon-append fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea>
										<b class="tooltip tooltip-top-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">右下角提示的Textarea</label>
									<label class="textarea"> <i class="icon-append fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea>
										<b class="tooltip tooltip-bottom-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">右侧提示的Textarea</label>
									<label class="textarea"> <i class="icon-append fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea>
										<b class="tooltip tooltip-right">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>
							
</fieldset>
						
</form>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->

		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-4"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-custombutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-edit"></i></span>    <h2>Smart 提示 (右边) </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
    		                <form action="" class="smart-form " >
			                    <header>
	带有图标的提示
</header>
							<fieldset >
									<section >
										<label class="label">左上角提示的Text input</label>
									<label class="input"> <i class="icon-prepend fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-top-left">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">左下角提示的Text input</label>
									<label class="input"> <i class="icon-prepend fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-bottom-left">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">左侧提示的Text input</label>
									<label class="input"> <i class="icon-prepend fa fa-question-circle"></i>
										<input type="text" placeholder="聚焦显示提示">
										<b class="tooltip tooltip-left">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>
							
</fieldset>

							<fieldset >
									<section >
										<label class="label">左上角提示的Textarea</label>
									<label class="textarea"> <i class="icon-prepend fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea>
										<b class="tooltip tooltip-top-left"> 
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>

								<section >
										<label class="label">左下角提示的Textarea</label>
									<label class="textarea"> <i class="icon-prepend fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea>
										<b class="tooltip tooltip-bottom-left">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>
								
								<section >
										<label class="label">左侧提示的</label>
									<label class="textarea"> <i class="icon-prepend fa fa-question-circle"></i>
										<textarea rows="3" placeholder="聚焦显示提示"></textarea> 
										<b class="tooltip tooltip-left">
											<i class="fa fa-warning txt-color-teal"></i> 一些帮助信息
										</b>
									</label>
								
</section>
							
</fieldset>
						
</form>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->

</section>
 <!-- end widgetGrid -->

<!-- SCRIPTS ON PAGE EVENT -->
<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR
	 * 
	 * loadScript(".../plugin.js", run_after_loaded);
	 */

	// PAGE RELATED SCRIPTS
	
	// pagefunction
	
	var pagefunction = function() {
		
	};
	
	// end pagefunction
	
	// run pagefunction on load
	pagefunction();

</script>